<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06.条件渲染</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入reactDOM核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、引入babel转换文件-->
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <!--4、创建容器元素-->
    <div id="root"></div>
    <!--5、设置script标签的类型为text/babel-->
    <script type="text/babel">
        //6、创建根元素标签对象
        const root = ReactDOM.createRoot(document.querySelector('#root'));
        //条件渲染：
        //有三种写法：
        //if...else...
        //三元表达式
        //逻辑短路

        //案例：天气如何
        //方式1：if...else
        // let isGood = false;
        // //常量要求定义的时候必须有初始值
        // let vDOM;
        // if (isGood) {
        //     vDOM = <div>
        //         <p>今天的天气是好</p>
        //     </div>
        // } else {
        //     vDOM = <div>
        //         <p>今天的天气是不好</p>
        //     </div>
        // }
        // //7、渲染
        // root.render(vDOM);


        //方式2：三元表达式
        // let isGood = true;
        // let vDOM = <div>
        //     <p>今天的天气是{isGood ? '好' : '不好'}</p>
        // </div>
        // root.render(vDOM);

        //方式3:逻辑短路

        //逻辑与判断
        // console.log(1 < 2 && 3 < 4); //true && true = true

        //逻辑与短路
        // console.log(3 && 4); //true && true = 最后的值  4
        // console.log(undefined && 1 && null && 3 && false); //false && true  = 第一个false值

        // console.log(1 < 2 || 3 < 4);//true || true = true;
        //逻辑或短路
        // console.log(undefined || 3 || 4); //3

        //逻辑短路用的最多的就是逻辑与短路,当只要是条件满足即显示这个DOM结构，否则不显示，适合于单一的结构(并不是二选一)
        let isGood = true;
        const vDOM = <div>
            <p>
                {
                    isGood || <span>今天的天气好</span>
                }
            </p>
        </div>
        root.render(vDOM);




    </script>
</body>

</html>